<!--
 * @Author: jiatong_yan
 * @Date: 2021-08-10 16:02:03
 * @LastEditTime: 2021-08-17 12:04:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \star\firstproject\menu.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/commom.css">
</head>
<body>
  <div class="body-h">
    <div class='container'> <!--页面左边-->
        <!-- 左边顶部 -->
        <header class='header'>
            <a class='logo' href='starbucks.html'>
            <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg' alt='星巴克'/>
            </a>
            <div class='primary'>
                <ul>
                    <li class='stores'>
                        <a class="store-s" href='#'>门店</a>
                    </li>
                    <li class='account'>
                        <a class="account-c" href='account.html'> 我的帐户</a>
                    </li>
                    <li class='menu'>
                        <a class="menu-m"  href='menu.html'>菜单</a>
                    </li>
                </ul>
            </div>
            <a class='trigger' rel='nav-overlay'> 
                <button>
                  <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-hamburger.svg'/>
                </button>
                
            </a> 
        </header>
        <!-- 左边下底部-->
        <div class="container-m">
            <div class="container-bottom">
                <div class="nav-d">
                  <ul class="tabs-w">
                    <li><a href="#">菜单</a></li>
                    <li><a href="#">全部 </a></li>
                    <li><a href="#">饮料 </a></li>
                    <li><a href="#">美食 </a></li>
                    <li><a href="#">咖啡产品 </a></li>
                    <li><a href="#">商品 </a></li>
                </ul>
                </div>
            </div>
        </div>
    </div>
     <!-- 扩展 -->
     <div class="nav">
      <header class='header1'>
          <a class='logo' href='/'>
          <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg' alt='星巴克'/>
          </a>
          <a class='trigger1' rel='nav-overlay'> 
              <button>
                  <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-close.svg'/>
              </button>
          </a> 
      </header1>
      <div class="container-m1">
          <div class="container-bottom1">
              <ul class="list">
                  <li> <a href="#">门店</a></li>
                  <li> <a href="#">星享俱乐部</a></li>
                  <li> <a href="menu.html">菜单</a></li>
                  <li> <a href="starbucks-app.html">星巴克移动应用</a></li>
                  <li> <a href="#">星礼卡</a></li>
                  <li> <a href="starbucks-reserve.html">星巴克臻选<sup>TM</sup></a></li>
                  <li> <a href="starbucks-now.html">咖快<sup>TM</sup>&nbsp;-&nbsp;在线点 到店取</a></li>
                  <li> <a href="starbucks-delivers-info.html">专星送<sup>TM</sup></a></li>
                  <li> <a href="coffee-blog.html">咖啡星讲堂</a></li>
                  <li> <a href="#">上海烘焙坊</a></li>
                  <li> <a href="about.html">关于星巴克</a></li>
                  <li> <a href="help.html">帮助中心</a></li>
              </ul>
          </div>
      </div>
  </div>
<script>
  document.getElementsByTagName("button")[0].onclick=function(){document.getElementsByClassName("nav")[0].style.display="block",document.getElementsByClassName("container")[0].style.display="none";}
  document.getElementsByTagName("button")[1].onclick=function(){document.getElementsByClassName("nav")[0].style.display="none",document.getElementsByClassName("container")[0].style.display="block";}
</script>
    <!-- 页面右边 -->
    <div class="main">
        <div class="cream">
          <b>咖啡融合冰激凌</b>
          <ul>
            <li>
              <img src="../firstproject/img/menu-imgs/affogato.jpg" alt="">
              <br>
              <b>阿馥奇朵<span><sup>TM</sup></span></b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/cold-brew-malt.jpg" alt="">
              <br>
              <b>麦芽雪冷萃<span><sup>TM</sup></span></b>
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/cold-brew-float.jpg" alt="">
              <br>
              <b>冷萃浮乐冰<span><sup>TM</sup></span></b>
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/instore-nitro-cold-brew-float.jpg" alt="">
              <br>
              <b>气致<span><sup>TM</sup></span>冷萃浮乐冰<span><sup>TM</sup></span></b>
            </li>
          </ul><hr/>
        </div> 
        
        
        <div class="xl">
          <b>星巴克冷萃咖啡系列</b>
          <ul>
            <li>
              <img src="../firstproject/img/menu-imgs/cold-brew.jpg" alt="">
              <br>
              <b>冷萃冰咖啡</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/vanilla-flavor-sweet-cream-cold-brew.jpg" alt="">
              <br>
              <b>轻甜奶油冷萃</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/cold-brew-float.jpg" alt="">
              <br>
              <b>棉云冷萃</b> 
            </li>
          </ul>
        </div>
        <hr/>

        <div class="sg">
          <b>手工调制浓缩咖啡</b>
          <ul>
            <li>
              <img src="../firstproject/img/menu-imgs/caffe-americano.jpg" alt="">
              <br>
              <b>美式咖啡(热/冷)</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/caffe-latte.jpg" alt="">
              <br>
              <b>拿铁(热/冷)</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/caffe-mocha.jpg" alt="">
              <br>
              <b>摩卡(热/冷)</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/cappuccino.jpg" alt="">
              <br>
              <b>卡布奇诺(热/冷)</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/caffe-mocha.jpg" alt="">
              <br>
              <b>焦糖玛奇朵(热/冷)</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/espresso.jpg" alt="">
              <br>
              <b>浓缩咖啡</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/flat-white.jpg" alt="">
              <br>
              <b>馥芮白<span><sup>TM</sup></span></b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/hazelnut-flavored-latte.jpg" alt="">
              <br>
              <b>榛果风味拿铁(热/冷)</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/vanilla-flavored-latte.jpg" alt="">
              <br>
              <b>香草风味拿铁(热/冷)</b> 
            </li>
          </ul>
        </div>
        <hr/>

        <div class="xbl">
          <b>星冰乐</b>
          <ul>
            <li>
              <img src="../firstproject/img/menu-imgs/caramel-espresso-frappuccino.jpg" alt="">
              <br>
              <b>焦糖浓缩咖啡星冰乐</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/green-tea-frappuccino.jpg" alt="">
              <br>
              <b>抹茶星冰乐</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/mango-passion-tea.jpg" alt="">
              <br>
              <b>芒果西番莲果茶星冰乐</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/mocha-frappuccino.jpg" alt="">
              <br>
              <b>摩卡星冰乐</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/mocha-java-chip-frappuccino.jpg" alt="">
              <br>
              <b>摩卡可可碎片星冰乐</b> 
            </li>
            <li>
              <img src="../firstproject/img/menu-imgs/vanilla-flavored-cream-frappuccino-blended-beverage.jpg" alt="">
              <br>
              <b>香草风味星冰乐</b> 
            </li>
          </ul>
        </div>
        <hr/>

    </div>
  </div>
</body>
</html>
